<template>
    <ul class="other">
        <li>
            <i class="iTitle">
                <span>Pexels的apiKey：</span>
                <el-tooltip :content="'当前apiKey的值：' + PexelsKey">
                    <el-icon class="icon">
                        <Warning />
                    </el-icon>
                </el-tooltip>
            </i>
            <div class="key">
                <el-input v-model="apiKey" style="width: 100%" placeholder="请输入您的apiKey值" size="small" clearable />
                <div class="btn">
                    <el-button type="primary" :icon="Check" circle size="small" @click='setApiKey(apiKey)' title='确认' />
                </div>
            </div>
        </li>
        <li>
            <i class="iTitle">
                <span>图片动画时长(ms)：</span>
                <el-tooltip content="图片首次进入页面的动画时长(单位：毫秒)，为0时关闭动画">
                    <el-icon class="icon">
                        <Warning />
                    </el-icon>
                </el-tooltip>
            </i>
            <el-input-number v-model="imgDuration" :min="0" :step="100" :max="3000" size="small"
                @change="handleChange2" />
        </li>
        <li>
            <i class="iTitle">
                <span>图片进入时机(px)：</span>
                <el-tooltip content="图片首次进入页面的执行时机，即图片距离底部多少高度是开始执行动画(单位：px)">
                    <el-icon class="icon">
                        <Warning />
                    </el-icon>
                </el-tooltip>
            </i>
            <el-input-number v-model="imgAnimationStart" :min="0" :step="10" :max="1000" size="small"
                @change="handleChange3" />
        </li>
        <li>
            <i class="iTitle">
                <span>右键功能：</span>
                <el-tooltip content="详情页点击右键的功能，设置为返回时页面返回按钮不在显示，以此类推">
                    <el-icon class="icon">
                        <Warning />
                    </el-icon>
                </el-tooltip>
            </i>
            <el-radio-group v-model="rightClickFunction" size="small" @change="handleChange5">
                <el-radio-button label="无功能" value="None" />
                <el-radio-button label="返回上级" value="Back" />
                <el-radio-button label="操作菜单" value="Menu" />
            </el-radio-group>
        </li>
        <li>
            <i class="iTitle">
                <span>图片保存格式：</span>
                <el-tooltip content="jpg有损压缩（保存图片体积小，肉眼看差距不大），png无损压缩（原始大小）">
                    <el-icon class="icon">
                        <Warning />
                    </el-icon>
                </el-tooltip>
            </i>
            <el-radio-group v-model="imgFormat" @change="handleChange5">
                <el-radio value="image/jpeg" size="large">jpg</el-radio>
                <el-radio value="image/png" size="large">png</el-radio>
            </el-radio-group>
        </li>
        <li>
            <i class="iTitle">
                <span>重置配置：</span>
                <el-tooltip content="重置配置">
                    <el-icon class="icon">
                        <Warning />
                    </el-icon>
                </el-tooltip>
            </i>
            <btn class="resetBtn" @click="defaultConfiguration" />
        </li>
    </ul>
</template>

<script setup lang="ts">
import { settingStore } from '@renderer/store/setting'
import { imgSourceStore } from '@renderer/store/imageSource'
import { Warning } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { ref, onMounted } from 'vue'
import { Check } from '@element-plus/icons-vue'
import btn from './icon/button.vue'
import { ElMessage } from 'element-plus'
const { ipcRenderer } = require('electron')
const set = settingStore()
const source = imgSourceStore()
const {  imgDuration, imgAnimationStart, rightClickFunction, imgFormat } = storeToRefs(set)
const { PexelsKey } = storeToRefs(source)
const apiKey = ref('')

const handleChange2 = (value: number) => {
    imgDuration.value = value
    ipcRenderer.send('update-storage', JSON.stringify(set.$state))
}
const handleChange3 = (value: number) => {
    imgAnimationStart.value = value
    ipcRenderer.send('update-storage', JSON.stringify(set.$state))
}

const handleChange5 = () => {
    ipcRenderer.send('update-storage', JSON.stringify(set.$state))
}
const setApiKey = (key: string) => {
    source.PexelsKey = key
    ElMessage({
        message: '已更新apiKey值',
        type: 'success',
        plain: true
    })
}
const defaultConfiguration = () => {
    apiKey.value = 'be2SiQjrbTEIzyAu6dpSovjCPvyNNVek1omoAguYfRJC7hWMpwHZTz98'
    source.PexelsKey = 'be2SiQjrbTEIzyAu6dpSovjCPvyNNVek1omoAguYfRJC7hWMpwHZTz98'
    imgDuration.value = 600
    imgAnimationStart.value = 30
    rightClickFunction.value = 'None'
    imgFormat.value = 'image/jpeg'
    ipcRenderer.send('update-storage', JSON.stringify(set.$state))
    ElMessage({
        message: '已恢复默认值',
        type: 'success',
        plain: true
    })
}
onMounted(() => {
    apiKey.value = PexelsKey.value
})
</script>

<style scoped lang="scss">
.other {
    padding: 30px;
    margin: 20px;
    background-color: $setBack;
    border-radius: 10px;
    box-shadow: 0.3em 0.3em 0.7em #00000015;
    transition: border 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    li {
        margin-top: 10px;
        display: grid;
        grid-template-columns: 200px 1fr;
        align-items: center;
        font-size: 15px;
        gap: 20px;

        .key {
            display: grid;
            grid-template-columns: 3fr 1fr;
            align-items: center;
            gap: 15px;
        }

        .iTitle {
            display: flex;
            align-items: center;
            justify-content: right;
            border-radius: 5px;
            padding: 1px 5px;

            .icon {
                font-size: 16px;
                cursor: pointer;
            }
        }

        .resetBtn {
            width: 120px;
        }
    }
}
</style>